<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../font_图标/iconfont.css"/>
		<link rel="stylesheet" type="text/css" href="../css/coupon2.css"/>
		<title></title>
	</head>
	<body>
		<!--头部-->
		<header>
			<ul>
				<li><a href=""><i class="icon iconfont icon-qiehuanqizuo"></i></a></li>
				<li><a href="javascript:;" class="share">消费详情<i class="icon iconfont icon-sanjiao1"></i></a>
					<!--<ul>
						
					</ul>-->
				</li>
				<li></li>
			</ul>
		</header>
		<!--日期-->
		<div class="date">
			<p>2016年7月15日</p>
			<p>总消费1528条</p>
		</div>
		<!--内容-->
		<div class="conts">
			<ul>
				<li>
					<div><p>闪</p></div>
					<div>
						<p><span>天天消消乐</span><span>闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
				<li>
					<div><p>短</p></div>
					<div>
						<p><span>大话西游</span><span>短信量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
				<li>
					<div><p>短</p></div>
					<div>
						<p><span>天天消消乐</span><span>闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
				<li>
					<div><p>闪</p></div>
					<div>
						<p><span>王者荣耀</span><span>闪助量充值</span>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
			</ul>
		</div>
		<!--日期-->
		<div class="date">
			2016年 7月14
		</div>
		<div class="conts1">
			<ul>
				<li>
					<div><p>短</p></div>
					<div>
						<p><span>大话西游</span><span>闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
				<li>
					<div><p>闪</p></div>
					<div>
						<p><span>王者荣耀</span><span>闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
				<li>
					<div><p>闪</p></div>
					<div>
						<p><span>天天消消乐</span><span>闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
				<li>
					<div><p>短</p></div>
					<div>
						<p><span>王者荣耀</span><span>闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
		   </ul>
		</div>
		<!--日期-->
		<div class="date">
			2016年 7月13
		</div>
		<div class="conts1">
			<ul>
				<li>
					<div><p>短</p></div>
					<div>
						<p><span style="color: #FED59C;border:1px solid #FED59C;">大话西游</span><span style="font-size: 0.6rem;
                        margin-left: 0.6rem;">闪助量充值</span></p>
						<p>2016/7/6 14:24</p>
					</div>
					<div>-1条</div>
				</li>
			</ul>
		</div>
		<div class="alert_bg">
			<div><button>全部账户</button></div>
			<ul>
				<li><button>天天消消乐</button></li>
				<li><button>大话西游</button></li>
				<li><button>王者荣耀</button></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		//字体大小
		(function(win,doc){
			//浏览器缩放时
			win.onresize=function(){
				change();	
			};
			change();
			function change(){
				var oFs=doc.documentElement.clientWidth/(320/20);
		
				//设置根目录字体大小
				doc.documentElement.style.fontSize=oFs+'px';	
			}	
		})(window,document);
		
		var shareBtn = document.querySelector('.share');
		var alertView = document.querySelector('.alert_bg');
		var aDiv=document.querySelector('.alert_bg div');
		var aLi = document.querySelectorAll('.alert_bg ul li');
		
		shareBtn.onclick = function(){
			alertView.style.display = 'block';
		}
		
		for(var i = 0; i < aLi.length; i++){
			aLi[i].onclick = function(){
				alertView.style.display = 'none';
			}
		}
		aDiv.onclick=function(){
			alertView.style.display = 'none';
		}
	</script>
</html>
